<template>
  <div class="pay-type">
    <top-title
      title="支付类型"
      btn-text="添加类型"
      @add="visible = true"
    />
    <n-card>
      <n-tabs
        type="line"
        animated
        :on-update:value="handleTabChange"
      >
        <n-tab-pane
          v-for="(name, index) in tabList"
          :key="index"
          :name="index"
          :tab="name"
        >
          <n-data-table
            size="small"
            :columns="columns"
            :data="list"
            :pagination="false"
            :bordered="false"
            :style="{ height: 'calc(100vh - 290px)' }"
          />
          <custom-pagination
            v-model:total="total"
            v-model:page-num="pageNum"
            v-model:page-size="pageSize"
          />
        </n-tab-pane>
      </n-tabs>
    </n-card>
    <custom-form
      v-model:visible="visible"
      v-model:form="form"
      :width="600"
      :height="500"
      :config-list="configList"
      title="添加类型"
      @confirm="handleConfirm"
    />
  </div>
</template>

<script lang="ts" setup>
  import { h } from 'vue'
  import type { DataTableColumns } from 'naive-ui'
  import { NBadge, NButton } from 'naive-ui'
  import SvgIcon from '~~/components/SvgIcon/index.vue'

  type PayType = {
    id?: number
    icon: string
    name: string
    type: number
    status: number
  }
  // 是否显示弹窗
  const visible = ref(false)

  const tabList = ['支出', '收入']

  const columns = ref<DataTableColumns<Required<PayType>>>([
    {
      title: '图标',
      key: 'icon',
      width: 80,
      render(row) {
        return h(
          'div',
          {
            style: {
              background: row.type === 0 ? '#18a058' : '#e5b951',
              width: '26px',
              height: '26px',
              textAlign: 'center',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              borderRadius: '9999px'
            }
          },
          h(
            SvgIcon,
            {
              name: row.icon,
              style: { fontSize: '16px' }
            },
            {}
          )
        )
      }
    },
    {
      title: '名称',
      key: 'name'
    },
    {
      title: '状态',
      key: 'status',
      render(row) {
        return [
          h(
            'div',
            {
              style: { display: 'flex', alignItems: 'center' }
            },
            {
              default: () => [
                h(
                  NBadge,
                  {
                    dot: true,
                    type: row.status === 0 ? 'error' : 'success',
                    style: { marginRight: '4px' }
                  },
                  {}
                ),
                h('span', {}, { default: () => (row.status === 0 ? '禁用' : '启用') })
              ]
            }
          )
        ]
      }
    },
    {
      title: '创建时间',
      key: 'createTime'
    },
    {
      title: '操作',
      key: 'actions',
      align: 'center',
      width: 200,
      render(row) {
        return [
          h(
            NButton,
            {
              type: 'primary',
              quaternary: true,
              size: 'tiny'
            },
            { default: () => '切换状态' }
          ),
          h(
            NButton,
            {
              type: 'primary',
              quaternary: true,
              size: 'tiny',
              onClick: () => handleEdit(row.id)
            },
            { default: () => '修改' }
          ),
          h(NButton, { type: 'error', quaternary: true, size: 'tiny' }, { default: () => '删除' })
        ]
      }
    }
  ])

  const form = ref<PayType>({
    status: 1,
    type: 0,
    name: '',
    icon: ''
  })

  const configList: FormRenderConfig[] = [
    {
      label: '名称',
      span: 12,
      type: 'input',
      key: 'name'
    },
    {
      label: '排序',
      span: 12,
      type: 'number',
      key: 'sort'
    },
    {
      label: '类型',
      span: 12,
      type: 'radio',
      key: 'type',
      options: [
        {
          label: '支出',
          value: 0
        },
        {
          label: '收入',
          value: 1
        }
      ]
    },
    {
      label: '状态',
      span: 12,
      type: 'radio',
      key: 'status',
      options: [
        {
          label: '禁用',
          value: 0
        },
        {
          label: '启用',
          value: 1
        }
      ]
    },
    {
      label: '图标',
      span: 12,
      type: 'input',
      key: 'icon'
    }
  ]

  //  tab切换
  function handleTabChange(val: string) {
    queryParmas.type = val
    handleQuery()
  }

  // 提交
  async function handleConfirm() {
    try {
      await $dialog('是否确认提交？')
      if (form.value.id) await http.put(`bill/payType/${form.value.id}`, { ...form.value })
      else await http.post('bill/payType', { ...form.value })
      $message.success('操作成功')
      handleClose()
      handleQuery()
    } catch (e) {}
  }

  // 关闭
  function handleClose() {
    visible.value = false
    form.value = {
      status: 1,
      type: 0,
      name: '',
      icon: ''
    }
  }

  // 修改
  function handleEdit(id: number) {
    http.get(`bill/payType/${id}`).then(res => {
      form.value = res.data
      visible.value = true
    })
  }

  const { total, pageNum, pageSize, handleQuery, queryParmas, list } = useList<PayType>({
    reqUrl: 'bill/payType',
    queryParams: {
      type: '0'
    }
  })

  const { $dialog, $message } = useFastNaive()
</script>

<style scoped lang="scss">
  .pay-type {
    padding: 16px;
  }
</style>
